<script setup lang="ts">
import { get } from '@vueuse/core'
import type { color } from 'html2canvas/dist/types/css/types/color'

const router = useRouter()
const route = useRoute()
const username = ref('')
const sex = ref('')
const hs = ref('2')
const birthday = ref('')
const wxbzzl = ref('')
const lnys = ref('')
const rglm = ref('')
const tywh = ref('')
const myq_text = ref('')
const nameList = ref()


const xing1 = ref('')
const xing2 = ref('')
const ming1 = ref('')
const ming2 = ref('')

const hzwh1 = ref('')
const hzwh2 = ref('')
const hzwh3 = ref('')
const hzwh4 = ref('')

const sancai = ref('')

const sc = ref('')

const zhpj = ref('优')

const pjnr = ref('')

const tiangee = ref('')

const digee = ref('')

const tiangejs = ref('')

const renge = ref('')

const digejs = ref('')

const dige = ref('')

const waigee = ref('')

const waigejs = ref('')

const waige = ref('')

const jcy = ref('')

const jx1 = ref('')

const cgy = ref('')

const jx2 = ref('')

const rjgx = ref('')

const jx3 = ref('')

const xg = ref('')

const tgas = ref('')

const rgas = ref('')

const dgas = ref('')

const wgas = ref('')

const options = [{
  value: '2',
  label: '单字'
}, {
  value: '3',
  label: '双字'
}]

const columns = ref([{
  key: 'bz',
  label: '八字',
  class: 'bg-[#eedec7] py-3'
}, {
  key: 'nz',
  label: '年柱',
  class: 'bg-[#eedec7] py-3'
//   class: 'italic'
}, {
  key: 'yz',
  label: '月柱',
  class: 'bg-[#eedec7] py-3'
}, {
  key: 'rz',
  label: '日柱',
  class: 'bg-[#eedec7] py-3'
}, {
  key: 'sz',
  label: '时柱',
  class: 'bg-[#eedec7] py-3'
}])

const items = ref([{
  bz:'天干',
  nz: '',
  yz: '',
  rz: '',
  sz: '',
  class: 'bg-[#fcf5e5]'
}, {
  bz: '地支',
  nz: '',
  yz: '',
  rz: '',
  sz: '',
  class: 'bg-[#eedec7]'
  }])

  watch(hs, () => {
    getResult()
  })

const showResult = ref(true)

const showDetail = ref(false)

const getResult = async(name: string = '') => {
  const oid = route.query.oid;
  if (!oid) {
      router.push('/quming')
  }

  if (name != '') {
    const { data: res } = await useFetchPost('/api/Quming/qumingResult', {
      oid: oid,
      name: name,
    });
    xing1.value = res.value.data.xm_arr.xing1;
    xing2.value = res.value.data.xm_arr.xing2;
    ming1.value = res.value.data.xm_arr.ming1;
    ming2.value = res.value.data.xm_arr.ming2;

    hzwh1.value = res.value.data.bh_wh_arr.hzwh1;
    hzwh2.value = res.value.data.bh_wh_arr.hzwh2;
    hzwh3.value = res.value.data.bh_wh_arr.hzwh3;
    hzwh4.value = res.value.data.bh_wh_arr.hzwh4;

    if (res.value.data.xmdf < 60) { 
      zhpj.value = '差';
      pjnr.value = '你的名字可能不是很好。强烈建议你换个名字试试，也许人生会因此而改变的。如果有条件，改个名字也未尝不可。';
    }

    if (res.value.data.xmdf < 70) { 
      zhpj.value = '合格';
      pjnr.value = '你的名字可能不太好，如果可能的话，不妨尝试改变一下，也许会有事半功倍之效。如果有条件，改个名字也未尝不可。';
    }

    if (res.value.data.xmdf >= 70) { 
      zhpj.value = '良';
      pjnr.value = '你的名字可能不太理想，要想赢得成功，必须比别人付出更多的艰辛和汗水。如果有条件，改个名字也未尝不可。如果有条件，改个名字也未尝不可。';
    }

    if (res.value.data.xmdf >= 80) { 
      zhpj.value = '优';
      pjnr.value = '你的名字取得不错，如果与命理搭配得当，相信它会助你一生顺利的，祝你好运！';
    }

    if (res.value.data.xmdf >= 90) { 
      zhpj.value = '吉';
      pjnr.value = '你的名字取得非常棒，如果与命理搭配得当，成功与惊喜将会伴随你的一生。但千万注意不要失去上进心。';
    }

    sancai.value = res.value.data.rssancai.content;

    sc.value = res.value.data.rssancai.sancai;

    tiangee.value = res.value.data.tiangearr.tiangee;

    digee.value = res.value.data.digearr.digee;

    tiangejs.value = res.value.data.rengearr.yy;

    renge.value = res.value.data.rengearr.content;

    digejs.value = res.value.data.digearr.yy;

    dige.value = res.value.data.digearr.content;

    waigee.value = res.value.data.waigearr.waigee;

    waigejs.value = res.value.data.waigearr.yy;

    waige.value = res.value.data.waigearr.content;

    jcy.value = res.value.data.rssancai.jcy;

    jx1.value = res.value.data.rssancai.jx1;

    cgy.value = res.value.data.rssancai.cgy;

    jx2.value = res.value.data.rssancai.jx2;

    rjgx.value = res.value.data.rssancai.rjgx;

    jx3.value = res.value.data.rssancai.jx3;

    xg.value = res.value.data.rssancai.xg;

    tgas.value = res.value.data.tiangearr.as;

    rgas.value = res.value.data.rengearr.as;

    dgas.value = res.value.data.digearr.as;

    wgas.value = res.value.data.waigearr.as;

    return;
  }

  const { data: res } = await useFetchPost('/api/Quming/qumingResult', {
    oid: oid,
    hs: hs.value,
  });

  username.value = res.value.data.data.name;
  if (res.value.data.data.gender == '1') {
      sex.value = '男性'
  } else {
      sex.value = '女性'
  }
  birthday.value = res.value.data.data.y+'年'+res.value.data.data.m+'月'+res.value.data.data.d+'日'+res.value.data.data.h+'时';

  //<p>本命属<{$cookies.sx}>，<{$nayin.0.layin}>命。<{$wang.wang}><{$wang.que}>；日主天干为<{$nayin.0.layin}><{$wang.wang}><{$wang.que}><{$cookies.bazi.4}>，生于<{$cookies.siji}>季。</p>
  wxbzzl.value = '本命属'+res.value.data.cookies.sx+'，'+res.value.data.info.nayin[0].layin+'命。日主天干为'+res.value.data.info.nayin[0].layin+res.value.data.cookies.bazi[4]+'，生于'+res.value.data.cookies.siji+'季。';

  //  <td><{$return.user.bazi.0}></td>
  //           <td><{$return.user.bazi.2}></td>
  //           <td><{$return.user.bazi.4}></td>
  //           <td><{$return.user.bazi.6}></td></tr>
  items.value = [{
      bz:'天干',
      nz: res.value.data.return.user.bazi[0],
      yz: res.value.data.return.user.bazi[2],
      rz: res.value.data.return.user.bazi[4],
      sz: res.value.data.return.user.bazi[6],
      class: 'bg-[#fcf5e5]'
      }, {
      bz: '地支',
      nz: res.value.data.return.user.bazi[1],
      yz: res.value.data.return.user.bazi[3],
      rz: res.value.data.return.user.bazi[5],
      sz: res.value.data.return.user.bazi[7],
      class: 'bg-[#eedec7]'
  }]

  lnys.value = res.value.data.return.sx.yf;

  rglm.value = res.value.data.rglm;
  // console.log(rglm.value)
  // console.log(rglm.value)
  tywh.value = res.value.data.info.tywh;

  myq_text.value = res.value.data.myq_text;

  nameList.value = res.value.data.name_list
}

onMounted(() => {
  getResult()
})

const openResult = () => {
  showResult.value = true
  showDetail.value = false
}

const showDetailFunc = (name: string) => {
  showResult.value = false
  showDetail.value = true
  getResult(name)
}

const count = computed(() => {
  return [xing1.value, xing2.value, ming1.value, ming2.value]
    .filter(c => !!c).length
})

</script>

<template>
  <div class="w-full min-h-screen relative">
    <Header :back="'/quming'" />
    <!-- 自适应背景图 -->
    <img 
      src="/assets/images/quming/result.png" 
      alt=""
      class="w-full h-auto object-contain"
    />
    <div class="absolute top-[25%] w-full text-[#794c24]">
      <div class="flex flex-col justify-between md:gap-10">
        <!-- <div class="ml-[10%] mr-[10%] pb-1 text-size-xl font-bold border-b text-center">信息</div> -->
        <div class="relative w-[95%] left-0 right-0 mx-auto mt-[5%]">
          <div>
            <img 
              src="/assets/images/quming/border-info2.png" 
              alt=""
              class="w-full h-auto object-contain"
            />
          </div>
          <div class="absolute top-[17%] md:top-[25%] text-[#735c34] left-0 right-0 mx-auto">
            <div class="flex items-start pt-1">
              <div class="ml-[10%] text-size-lg font-bold">姓氏：</div>
              <div class="text-size-lg">{{username}}</div>
            </div>
            <div class="flex items-start pt-1">
                <div class="ml-[10%] text-size-lg font-bold">性别：</div>
                <div class="text-size-lg">{{sex}}</div>
            </div>
            <div>
              <img v-if="sex === '男性'" class="w-15 absolute right-[10%] top-[1%]" src="/assets/images/quming/b-boy.png"/>
              <img v-if="sex === '女性'" class="w-15 absolute right-[10%] top-[1%]" src="/assets/images/quming/b-girl.png"/>
            </div>
            <UTable :ui="{td:{padding:'py-3'}, thead:'border-none', tr:{base:'border-none'}}" :rows="items" :columns="columns" class="pt-2 left-0 right-0 mx-auto w-[90%]">
                <template #quantity-data="{ row }">
                    {{ row.quantity.value }}
                </template>
            </UTable>
            <div class="pt-3 ml-[10%] mr-[10%]">
            {{wxbzzl}}
            </div>
          </div>
        </div>
        
        <div class="left-0 right-0 mx-auto pt-[5%] w-[50%]" @click="openResult">
          <img 
          src="/assets/images/quming/qm-result.png" 
          alt=""
          class="h-auto object-contain"
          />
        </div>


        <div v-show="showResult" class="bg-[#f1e0cb]">
          <div class="mt-8 mb-5 flex justify-center">
            <URadioGroup
                  v-model="hs"
                  :options="options"
                  :ui="{
                    fieldset: 'flex justify-center items-center gap-4'
                  }"
                  :uiRadio="{
                    label: 'text-794c24'
                  }"
              />
          </div>
          <div class="pb-3 bg-[#f1e0cb] rounded-lg pt-5 grid grid-cols-4 gap-x-8 gap-y-4 p-3 w-full left-0 right-0 mx-auto">
              <div class="border-1 text-center" v-for="list in nameList" :key="list.name">
                <span @click="showDetailFunc(list.name)">
                  {{ list.name }}
                </span>
              </div>
          </div>
        </div>

        <div v-show="showDetail" class="bg-[#f1e0cb]">
            <div class="bg-[#02b98d] text-white inline-block my-6 p-2 text-center">
              <span class="text-xl">姓名详情</span>
            </div>
            <div class="grid  grid-cols-2 gap-0" :class="{
              'grid-cols-1': count === 1,
              'grid-cols-2': count === 2,
              'grid-cols-3': count === 3,
              'grid-cols-4': count === 4
            }">
              <div v-if="xing1" class="relative aspect-square w-24 border-2 border-dashed border-red-300 overflow-hidden left-0 right-0 mx-auto">
                <!-- 左上到右下的对角线 -->
                <div class="absolute left-0 top-0 w-[141.42%] border-b-2 border-dashed border-red-300 transform rotate-45 origin-left" />
                <!-- 右上到左下的对角线 -->
                <div class="absolute right-0 top-0 w-[141.42%] border-b-2 border-dashed border-red-300 transform -rotate-45 origin-right" />
                <!-- 新增水平中线 -->
                <div class="absolute left-0 top-1/2 w-full transform -translate-y-1/2 border-t-2 border-dashed border-red-300" />
                
                <!-- 新增垂直中线 -->
                <div class="absolute left-1/2 top-0 h-full transform -translate-x-1/2 border-l-2 border-dashed border-red-300" />

                <div class="absolute inset-0 flex items-center justify-center z-10">
                  <span class="text-5xl font-bold">{{xing1}}</span>
                </div>
              </div>
              <div v-if="xing2" class="relative aspect-square w-24 border-2 border-dashed border-red-300 overflow-hidden left-0 right-0 mx-auto">
                <!-- 左上到右下的对角线 -->
                <div class="absolute left-0 top-0 w-[141.42%] border-b-2 border-dashed border-red-300 transform rotate-45 origin-left" />
                <!-- 右上到左下的对角线 -->
                <div class="absolute right-0 top-0 w-[141.42%] border-b-2 border-dashed border-red-300 transform -rotate-45 origin-right" />
                <!-- 新增水平中线 -->
                <div class="absolute left-0 top-1/2 w-full transform -translate-y-1/2 border-t-2 border-dashed border-red-300" />
                
                <!-- 新增垂直中线 -->
                <div class="absolute left-1/2 top-0 h-full transform -translate-x-1/2 border-l-2 border-dashed border-red-300" />

                <div class="absolute inset-0 flex items-center justify-center z-10">
                  <span class="text-5xl font-bold">{{xing2}}</span>
                </div>
              </div>
              <div v-if="ming1" class="relative aspect-square w-24 border-2 border-dashed border-red-300 overflow-hidden left-0 right-0 mx-auto">
                <!-- 左上到右下的对角线 -->
                <div class="absolute left-0 top-0 w-[141.42%] border-b-2 border-dashed border-red-300 transform rotate-45 origin-left" />
                <!-- 右上到左下的对角线 -->
                <div class="absolute right-0 top-0 w-[141.42%] border-b-2 border-dashed border-red-300 transform -rotate-45 origin-right" />
                <!-- 新增水平中线 -->
                <div class="absolute left-0 top-1/2 w-full transform -translate-y-1/2 border-t-2 border-dashed border-red-300" />
                
                <!-- 新增垂直中线 -->
                <div class="absolute left-1/2 top-0 h-full transform -translate-x-1/2 border-l-2 border-dashed border-red-300" />

                <div class="absolute inset-0 flex items-center justify-center z-10">
                  <span class="text-5xl font-bold">{{ming1}}</span>
                </div>
              </div>
              <div v-if="ming2" class="relative aspect-square w-24 border-2 border-dashed border-red-300 overflow-hidden left-0 right-0 mx-auto">
                <!-- 左上到右下的对角线 -->
                <div class="absolute left-0 top-0 w-[141.42%] border-b-2 border-dashed border-red-300 transform rotate-45 origin-left" />
                <!-- 右上到左下的对角线 -->
                <div class="absolute right-0 top-0 w-[141.42%] border-b-2 border-dashed border-red-300 transform -rotate-45 origin-right" />
                <!-- 新增水平中线 -->
                <div class="absolute left-0 top-1/2 w-full transform -translate-y-1/2 border-t-2 border-dashed border-red-300" />
                
                <!-- 新增垂直中线 -->
                <div class="absolute left-1/2 top-0 h-full transform -translate-x-1/2 border-l-2 border-dashed border-red-300" />

                <div class="absolute inset-0 flex items-center justify-center z-10">
                  <span class="text-5xl font-bold">{{ming2}}</span>
                </div>
              </div>
            </div>

            <div class="flex items-center justify-center mt-[5%] text-3xl text-gray-400 gap-3">
                <span v-show="hzwh1">[{{ hzwh1 }}]</span>
                <span v-show="hzwh2">[{{ hzwh2 }}]</span>
                <span v-show="hzwh3">[{{ hzwh3 }}]</span>
                <span v-show="hzwh4">[{{ hzwh4 }}]</span>
            </div>

            <div class="flex items-center justify-center mt-[5%] text-xl text-gray-400 gap-3 my-3">
                <span>综合评价：</span>
                <span class="text-red-500">{{ zhpj }}</span>
            </div>

            <hr class="border-dashed border-t-2 border-gray-300">

            <div class="my-3 text-gray-500 w-[90%] left-0 right-0 mx-auto">{{ pjnr }}</div>

            <hr class="border-dashed border-t-2 border-gray-300">

            <div class="w-[90%] left-0 right-0 mx-auto my-3">
              <span class="text-gray-500">详细解释</span>
              <div class="text-gray-500 text-sm" v-html="sancai">
              </div>
            </div>

            <hr class="border border-t-1 border-gray-400 my-6">

            <div class="bg-[#02b98d] text-white inline-block p-2 text-center">
              <span class="text-xl">天格{{ tiangee }}的解析</span>
            </div>

            <div class="w-[90%] left-0 right-0 mx-auto my-3">
              <span class="text-gray-500">人格数是先祖留传下来的，其数理对人影响不大。</span>
              <div class="text-gray-500 text-sm" v-html="tiangejs">
              </div>
              <div>
                <span class="text-gray-500">详细解释：</span>
              </div>
              <div class="text-gray-500 text-sm" v-html="renge">
              </div>
            </div>

            <hr class="border border-t-1 border-gray-400 my-6">

            <div class="bg-[#02b98d] text-white inline-block my-6 p-2 text-center">
              <span class="text-xl">地格{{ digee }}的解析</span>
            </div>

            <div class="w-[90%] left-0 right-0 mx-auto my-3">
              <span class="text-gray-500">地格数是先祖留传下来的，其数理对人影响不大。</span>
              <div class="text-gray-500 text-sm" v-html="digejs">
              </div>
              <div>
                <span class="text-gray-500">详细解释：</span>
              </div>
              <div class="text-gray-500 text-sm" v-html="dige">
              </div>
            </div>

            <div class="bg-[#02b98d] text-white inline-block my-6 p-2 text-center">
              <span class="text-xl">外格{{ waigee }}的解析</span>
            </div>

            <div class="w-[90%] left-0 right-0 mx-auto my-3">
              <span class="text-gray-500">外格数是先祖留传下来的，其数理对人影响不大。</span>
              <div class="text-gray-500 text-sm" v-html="waigejs">
              </div>
              <div>
                <span class="text-gray-500">详细解释：</span>
              </div>
              <div class="text-gray-500 text-sm" v-html="waige">
              </div>
            </div>

            <div class="bg-[#02b98d] text-white inline-block my-6 p-2 text-center">
              <span class="text-xl">姓名命运</span>
            </div>
            <div class="w-[90%] left-0 right-0 mx-auto my-3">
              <div class="text-gray-500 text-sm" v-html="waige">
              </div>
            </div>

            <div class="bg-[#02b98d] text-white inline-block my-6 p-2 text-center">
              <span class="text-xl">对三才数理的影响</span>
            </div>
            <div class="w-[90%] left-0 right-0 mx-auto my-3">
              <span>您的姓名三才配置为：</span>
              <span>{{ sc }}</span>
              <div class="text-gray-500">详细解释：</div>
              <div class="text-gray-500 text-sm" v-html="sancai">
              </div>
            </div>


            <div class="bg-[#02b98d] text-white inline-block my-6 p-2 text-center">
              <span class="text-xl">对基础运的影响</span>
            </div>
            <div class="w-[90%] left-0 right-0 mx-auto my-3">
              <div class="text-gray-500 text-sm" v-html="jcy">
              </div>
              <div class="text-gray-500 text-sm" v-html="jx1">
              </div>
            </div>

            <div class="bg-[#02b98d] text-white inline-block my-6 p-2 text-center">
              <span class="text-xl">对成功运的影响</span>
            </div>
            <div class="w-[90%] left-0 right-0 mx-auto my-3">
              <div class="text-gray-500 text-sm" v-html="cgy">
              </div>
              <div class="text-gray-500 text-sm" v-html="jx2">
              </div>
            </div>

            <div class="bg-[#02b98d] text-white inline-block my-6 p-2 text-center">
              <span class="text-xl">对人际关系的影响</span>
            </div>
            <div class="w-[90%] left-0 right-0 mx-auto my-3">
              <div class="text-gray-500 text-sm" v-html="rjgx">
              </div>
              <div class="text-gray-500 text-sm" v-html="jx3">
              </div>
            </div>

            <div class="bg-[#02b98d] text-white inline-block my-6 p-2 text-center">
              <span class="text-xl">对性格的影响</span>
            </div>
            <div class="w-[90%] left-0 right-0 mx-auto my-3">
              <div class="text-gray-500 text-sm" v-html="xg">
              </div>
            </div>

            <div class="bg-[#02b98d] text-white inline-block my-6 p-2 text-center">
              <span class="text-xl">天格{{tiangee}}有以下数理暗示</span>
            </div>
            <div class="w-[90%] left-0 right-0 mx-auto my-3">
              <div class="text-gray-500 text-sm" v-html="tgas">
              </div>
            </div>

            <div class="bg-[#02b98d] text-white inline-block my-6 p-2 text-center">
              <span class="text-xl">人格{{tiangee}}有以下数理暗示</span>
            </div>
            <div class="w-[90%] left-0 right-0 mx-auto my-3">
              <div class="text-gray-500 text-sm" v-html="rgas">
              </div>
            </div>

            <div class="bg-[#02b98d] text-white inline-block my-6 p-2 text-center">
              <span class="text-xl">地格{{tiangee}}有以下数理暗示</span>
            </div>
            <div class="w-[90%] left-0 right-0 mx-auto my-3">
              <div class="text-gray-500 text-sm" v-html="dgas">
              </div>
            </div>

            <div class="bg-[#02b98d] text-white inline-block my-6 p-2 text-center">
              <span class="text-xl">外格{{tiangee}}有以下数理暗示</span>
            </div>
            <div class="w-[90%] left-0 right-0 mx-auto my-3">
              <div class="text-gray-500 text-sm" v-html="wgas">
              </div>
            </div>
        </div>

      </div>
    </div>
  </div>
</template>
